@use './var.css';
@use './FormCreate/index.scss';
@use './theme.scss';
@use 'element-plus/theme-chalk/dark/css-vars.css';

.reset-margin [class*='el-icon'] + span {
  margin-left: 2px !important;
}

// 解决抽屉弹出时，body宽度变化的问题
.el-popup-parent--hidden {
  width: 100% !important;
}

// 解决表格内容超过表格总宽度后，横向滚动条前端顶不到表格边缘的问题
.el-scrollbar__bar {
  display: flex;
  justify-content: flex-start;
}

/* nprogress 适配 element-plus 的主题色 */
#nprogress {
  & .bar {
    background-color: var(--el-color-primary) !important;
  }

  & .peg {
    box-shadow:
      0 0 10px var(--el-color-primary),
      0 0 5px var(--el-color-primary) !important;
  }

  & .spinner-icon {
    border-top-color: var(--el-color-primary);
    border-left-color: var(--el-color-primary);
  }
}


// 生成 0-100 的内边距，步长为2（可根据需要调整）
@for $i from 0 through 100 {
  @if $i % 2 == 0 { // 按5的倍数生成，减少冗余
    .p-#{$i} { padding: #{$i}px !important; }
    .pl-#{$i} { padding-left: #{$i}px !important; }
    .pr-#{$i} { padding-right: #{$i}px !important; }
	.pt-#{$i} { padding-top: #{$i}px !important; }
	.pb-#{$i} { padding-bottom: #{$i}px !important; }
	.px-#{$i} { padding-left: #{$i}px !important;padding-right: #{$i}px !important; }
	.py-#{$i} { padding-top: #{$i}px !important;padding-bottom: #{$i}px !important; }
  }
}
 
// 生成 0-100 的外边距，步长为2（可根据需要调整）
@for $i from 0 through 100 {
  @if $i % 2 == 0 { // 按5的倍数生成，减少冗余
    .m-#{$i} { margin: #{$i}px !important; }
    .ml-#{$i} { margin-left: #{$i}px !important; }
    .mr-#{$i} { margin-right: #{$i}px !important; }
	.mt-#{$i} { margin-top: #{$i}px !important; }
	.mb-#{$i} { margin-bottom: #{$i}px !important; }
	.mx-#{$i} { margin-left: #{$i}px !important;margin-right: #{$i}px !important; }
	.my-#{$i} { margin-top: #{$i}px !important;margin-bottom: #{$i}px !important; }
  }
}
// 使用方法  <div class="p-20 m-20">15:38</div>





//字体大小，支持20到60rpx的字体
@for $i from 10 through 60 {
  .font-#{$i} {
    font-size: $i + px;
  }
}
// 使用方法  <div class="font-20">15:38</div>

// 定义省略号 Mixin
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
@mixin multiline-ellipsis($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
// 生成工具类
.ellipsis { @include text-ellipsis; }
 
@for $i from 1 through 5 {
  .ellipsis-#{$i} {
    @include multiline-ellipsis($i);
  }
}
/**
使用方法
<!-- 1行省略 -->
<div class="ellipsis">15:38</div>
<!-- 3行省略 -->
<div class="ellipsis-3">15:38</div>
*/



.df {
  display: flex;
}

.flex-a {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-b {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-c {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-s {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-e {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

a {
  text-decoration: none;
}

.content{
    width: 100%;
    min-height: 80px;
    padding: 6px;
    margin-bottom: 24px;
    box-sizing: border-box;
    .content_head {
        margin-bottom: 24px;
        .line {
            width: 5px;
            height: 21px;
            background: #50B5FF;
        }
        .title {
            font-size: 18px;
            color: #333;
            margin-left: 12px;
            font-weight: 600;
        }
    }
    .content_main {
        width: 100%;
        padding: 0 32px;
        box-sizing: border-box;
    }
}